<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <button onclick="btnGet()">get请求</button>
    <button onclick="btnPost()">post请求</button>
    <button onclick="btnPut()">put请求</button>
    <button onclick="btnDelete()">delete请求</button>
    <script src="https://cdn.bootcdn.net/ajax/libs/axios/0.19.2/axios.min.js"></script>
    <script>
        function btnGet() {
            /* axios.get('http://localhost:3000/posts')
            axios.get('http://localhost:3000/posts/1') */
            axios.get('http://localhost:3000/posts?id=1')
                .then(respones => {
                    console.log('/posts get', respones.data)
                })
        }

        function btnPost() {
            axios.post('http://localhost:3000/posts', {
                    "title": "janine 的由来",
                    "author": "janine"
                })
                .then(respones => {
                    console.log('/posts post', respones.data)
                })
        }

        function btnPut() {
            axios.put('http://localhost:3000/posts/2', {
                    "title": "janine 的由来...",
                    "author": "janine"
                })
                .then(respones => {
                    console.log('/posts put', respones.data)
                })
        }

        function btnDelete() {
            axios.delete('http://localhost:3000/posts/2', {
                    "title": "janine 的由来...",
                    "author": "janine"
                })
                .then(respones => {
                    console.log('/posts delete', respones.data)
                })
        }
    </script>
</body>

</html>